<template>
    <!-- 歌手详情页-左边 -->
    <div class="detail_l">
        <div class="detail_t">
            <div class="name">
                <h2>{{ detailList.name }}</h2>
                <h3>{{ firstName }};{{ afterName }}</h3>
            </div>
            <div class="header">
                <img :src="detailList.cover" alt="">
                <i class="mask"></i>
                <i class="collect"></i>
            </div>
            <div class="select">
                <ul>
                    <li @click="goHotsong" :class="{'active': $route.path.includes('hotsong')}">热门作品</li>
                    <li @click="goAlbum" :class="{'active': $route.path.includes('artistalbum')}">所有专辑</li>
                    <li @click="goMv" :class="{'active': $route.path.includes('artistmv')}">相关MV</li>
                    <li @click="goDesc" :class="{'active': $route.path.includes('artistdesc')}">艺人介绍</li>
                </ul>
            </div>
            <router-view />
        </div>
    </div>
</template>

<script>
import { ArtistDetailApi } from "@/request/api";
export default {
    data () {
        return {
            navActive: 1,
            firstName: "",
            afterName: "",
            detailList: [],
        }
    },
    computed: {
        id() {
            return this.$route.params.id;
        },
    },
    created() {
        ArtistDetailApi(this.id).then((res) => {
            // console.log(res);
            this.detailList = res.data.data.artist;
            this.firstName = res.data.data.artist.alias[0];
            this.afterName = res.data.data.artist.alias[1];
        });
    },
    methods: {
        goHotsong() {
            let id = this.$route.params.id
            this.$router.push(`/artlist/`+`${id}`+`/hotsong`)
        },
        goAlbum() {
            let id = this.$route.params.id
            this.$router.push(`/artlist/`+`${id}`+`/artistalbum`)
        },
        goMv() {
            let id = this.$route.params.id
            this.$router.push(`/artlist/`+`${id}`+`/artistmv`)
        },
        goDesc() {
            let id = this.$route.params.id
            this.$router.push(`/artlist/`+`${id}`+`/artistdesc`)
        }

    }
}
</script>
 
<style lang = "less" scoped>
@import "../../assets/base";
.detail_l {
    width: 640px;
    background-color: #fff;
    border-left: 1px solid #D7D7D7;
    padding: 40px;
    .detail_t {
        .name {
            height: 34px;
            display: flex;
            h2 {
                font-size: 24px;
                color: #333;
            }
            h3 {
                line-height: 34px;
                align-items: center;
                font-size: 14px;
                color: #999;
                padding: 0 0 0 10px;
            }
        }
        .header {
            position: relative;
            width: 640px;
            height: 300px;
            overflow: hidden;
            img {
                position: absolute;
                width:640px;
                display: block;
                top: -100px;
                left: 0;
            }
            .mask {
                display: block;
                position: absolute;
                bottom: 0;
                left: 0;
                width: 640px;
                height: 300px;
                background: url("https://s2.music.126.net/style/web2/img/ban_mask.png?8d16070c1933b0fe5933cd493056c775");
            }
            .collect {
                display: block;
                position: absolute;
                bottom: 18px;
                right: 20px;
                width: 76px;
                height: 32px;
                background: url("@/assets/images/public/iconall.png") no-repeat;
                background-position: 0 -500px;
                &:hover {
                    cursor: pointer;
                    background-position: 0 -540px;
                }
            }
        }
        .select {
            margin-bottom: 10px;
            ul {
                height: 40px;
                display: flex;
                border: 1px solid #D7D7D7;
                li {
                    flex: 1;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-right: 1px solid #D7D7D7;
                    &:last-of-type {
                        border-right: none;
                    }
                    &:hover {
                        cursor: pointer;
                        border-bottom: 2px solid @red;
                    }
                    
                }
                .active {
                    border-bottom: 2px solid @red;
                }
            }
        }
    }
}
</style>